<nav *ngIf="inNav==='in'"
     class="navbar navbar-default top-bar" role="navigation">
  <div class="container-fluid">
    <div >
      <div class="navbar-header">
        <a class="navbar-brand tt" href="#">
          <img class="logo" src="assets/old/huadian.gif">
          <span>中国华电&nbsp;水电远程诊断平台</span>
        </a>
      </div>
      <div class="top-bar-right text-center">
        <div class="row tool">
          <!--<span class="glyphicon glyphicon-cd" aria-hidden="true"></span>-->
          <img src="assets/images/menu/menu_02.png" style="display: inline-block"  alt="">
          <a
            (click)="test('综合展示')"
            [routerLink]="['/pages/exhibition']">综合展示</a>
          <span class="vertical-grabber">|</span>
          <!--<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>-->
          <img src="assets/images/menu/menu_03_02.png" style="display: inline-block"  alt="">
          <a
            (click)="test('状态监测')"
            [routerLink]="['/pages/condition-monitoring']">状态监测</a>
          <span class="vertical-grabber">|</span>
          <!--<span class="glyphicon glyphicon-scale" aria-hidden="true"></span>-->
          <img src="assets/images/menu/menu_01.png" style="display: inline-block"  alt="">
          <a
            (click)="test('性能分析')"
            [routerLink]="['/pages/performance-analysis']">性能分析</a>
          <span class="vertical-grabber">|</span>
          <!--<span class="glyphicon glyphicon-scale" aria-hidden="true"></span>-->
          <img src="assets/images/menu/menu_03.png" style="display: inline-block"  alt="">
          <a
            (click)="test('故障诊断')"
            [routerLink]="['/pages/page-not-found']">健康分析</a>
          <span class="vertical-grabber">|</span>
          <!--<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>-->
          <img src="assets/images/menu/menu_04.png" style="display: inline-block"  alt="">
          <a href="#">系统管理</a>
        </div>
        <div class="admin">
          <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
          {{userName}}
          <span class="vertical-grabber">|</span>
          <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
          <a (click)="changePwd(content)">修改密码</a>
          <span class="vertical-grabber">|</span>
          <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
          <a (click)="signOut()">退出</a>
        </div>
      </div>
    </div>

  </div>
</nav>
<!--<div class="text-center my-hide" (click)="showNav=!showNav">-->
<!--<span  class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>-->
<!--</div>-->
<div class="main-body" [@navIn]="inNav">
  <div class="full" (click)="changeNav()">
    <span [ngClass]="{'glyphicon-fullscreen':inNav==='in','glyphicon-resize-small':inNav==='out'}"
          class="glyphicon " aria-hidden="true"></span>
  </div>
  <div class="body-content" >
    <tabset  #projectTabs>
      <tab >
        <ng-template  tabHeading >
          <div #tabContent class="my-tab">{{tabName}}</div>
        </ng-template>
        <div class="tab-content">
          <router-outlet ></router-outlet>
        </div>
      </tab>

      <!--<tab >-->
      <!--<ng-template  tabHeading >-->
      <!--<div  href="jsc" routerLinkActive="active" [routerLink]="['./cockpit']" class="my-tab">驾驶舱</div>-->
      <!--</ng-template>-->
      <!--<div class="tab-content">-->
      <!--<router-outlet ></router-outlet>-->
      <!--</div>-->
      <!--</tab>-->
    </tabset>
  </div>
</div>

<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">修改登录密码</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" [formGroup]="passwordForm">
          <div class="form-group">
            <label for="password_old" class="col-sm-3 control-label">旧密码:</label>
            <div class="col-sm-9">
              <input type="password" id="password_old" class="form-control" required formControlName="password_old">
            </div>
          </div>
          <div class="form-group">
            <label for="password_new" class="col-sm-3 control-label">新密码:</label>
            <div class="col-sm-9">
              <input type="password" id="password_new" class="form-control" required formControlName="password_new">
            </div>
          </div>
          <div class="form-group">
            <label for="password_again" class="col-sm-3 control-label">重复一遍:</label>
            <div class="col-sm-9">
              <input type="password" id="password_again" class="form-control" required formControlName="password_again">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-4 col-md-offset-8">
              <button type="submit" class="btn btn-block btn-primary" [disabled]="!passwordForm.valid || passwordForm.value.password_new!=passwordForm.value.password_again">提交更改</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
